<template>
  <div>
    <!-- 新增 编辑 对话框-->
    <el-dialog :title="editForm.productno?'编辑':'新增'" v-model="editFormVisible" :visible.sync="editFormVisible" width="30%"
      :before-close="handleClose">
      <el-form :model="editForm" label-width="130px" min-height="150px" label-position="right" size="small">
        <el-form-item label="产品编号" required>
          <el-input v-model="editForm.productno" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="产品名字" style="" required>
          <el-input v-model="editForm.productname"></el-input>
        </el-form-item>

        <el-form-item label="产品单价" required>
          <el-col :span="13">
            <el-input placeholder="产品单价" v-model="editForm.productprice"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="产品销量" required>
          <el-col :span="13">
            <el-input placeholder="产品销量" v-model="editForm.productvolume"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item size="large" label-position="right">
          <el-button size="small" @click="editFormVisible = false" label-position="right">取 消</el-button>
          <el-button size="small" type="primary" @click=" editDo() " label-position="right">{{editForm.productno?'保存':'提交'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- header-->
    <el-card class="box-card-header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="产品名字">
          <el-input v-model="formInline.user" placeholder="产品名字"></el-input>
        </el-form-item>
<!--        <el-form-item label="价格区间">
          <el-select v-model="formInline.region" placeholder="价格区间">
            <el-option label="小于100" value="<100"></el-option>
            <el-option label="大于等于100" value=">=100"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="searchDo(formInline.user)">查询</el-button>
          <el-button type="primary" @click="clearable()">清空查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showInsert">新建</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <!-- 表格卡片-->
    <el-card class="box-card-content" v-bind:style="{minHeight: Height+'px'}">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="productno" label="产品编号" width="120">
        </el-table-column>
        <el-table-column prop="productname" label="产品名字" width="300">
        </el-table-column>
        <el-table-column prop="productprice" label="单价" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productvolume" label="销量" show-overflow-tooltip>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card shadow="never">
      <el-pagination style="margin-top: 20px;" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
        :page-size="pageSize" background='true' layout="total, prev, pager, next" :total="totleSize">
      </el-pagination>
    </el-card>
  </div>
</template>

<script src="./vue.js"></script>
<script>
  export default {
    inject: ['reload'],
    data() {
      return {
        pageSize: 5,
        currentPage1: 1,
        totleSize: 0,
        Height: 0,
        tableData: [],
        multipleSelection: [],
        formInline: {
          user: '',
          region: ''
        },
        editFormVisible: false,
        //编辑界面的数据
        editForm: {
          productno: "",
          productname: '',
          productprice: '',
          productvolume: '',
        },
      };
    },
    created() {
      this.getdata()
    },
    methods: {
      getdata(){
        this.getRequest('Sales/getStateList?beginPage=' + this.currentPage1 + '&pageSize=' + this.pageSize)
          .then(successResponse => {
            if (successResponse.data.status == 200) {
              this.tableData = successResponse.data.obj;
              this.totleSize = successResponse.data.totleSize;
            } else
              this.$message.error(successResponse.data.msg);
          })
          .catch(failResponse => {
            this.$message.error('网络不通畅');
          })
      },
      handleCurrentChange(val) {
        this.getdata()
      },
      clearable(){
        this.getdata()
        this.formInline.user = "";
      },

          /* getUsersInfo: function() {
              this.getRequest('Sales/findAll')
                .then(response => {
                  this.tableData = response.data.obj
                })
                .catch(error => {
                  console.log(error)
                })
            }, */
      showInsert() {
        this.editFormVisible = true;
        this.editForm.productno = "";
        this.editForm.productname = "";
        this.editForm.productprice = "";
        this.editForm.productvolume = "";
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit: function(index, row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
        // this.$message.success(row.chancename+'123')
      },
      //保存编辑/新增提交
      editDo() {
        if (this.editForm.productno) {
          this.postRequest('Sales/updateProduct', {
              productno: this.editForm.productno,
              productname: this.editForm.productname,
              productprice: this.editForm.productprice,
              productvolume: this.editForm.productvolume,
            })
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                this.$message.success("保存成功！");
                this.getdata()
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            })
          this.editFormVisible = false;
        } else {
          this.postRequest('Sales/insertProduct', {
              productno: this.editForm.productno,
              productname: this.editForm.productname,
              productprice: this.editForm.productprice,
              productvolume: this.editForm.productvolume,
            })
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                this.$message.success("新增成功！");
                this.getdata()
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            })
          this.editFormVisible = false;
        }
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      filterState(value, row) {
        return row.state === value;
      },
      filterKind(value, row) {
        return row.kind === value;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      deleteRow(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.postRequest('Sales/deleteProduct', {
              productno: row.productno,
            })
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                this.$message.success("删除成功！");
                this.currentPage1=1;
                this.getdata()
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      searchDo: function(name) {
        this.getRequest('Sales/getNameList?name=' + this.formInline.user + '&beginPage=' + this.currentPage1 + '&pageSize=' + this.pageSize)
          .then(successResponse => {
            if (successResponse.data.status == 200) {
              // this.getUsersInfo()
              this.tableData = successResponse.data.obj;
              this.totleSize = successResponse.data.totleSize;
            } else
              this.$message.error(successResponse.data.msg);
          })
          .catch(failResponse => {
            this.$message.error('网络不通畅');
          })
      },
      onSubmit() {
        console.log('submit!');
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },


    mounted() {
      //动态设置内容高度 让footer始终居底   header+footer的高度是100
      this.Height = document.documentElement.clientHeight - 375;
      //监听浏览器窗口变化　
      window.onresize = () => {
        this.Height = document.documentElement.clientHeight - 375
      }

    }
  }
</script>

<style>
  .box-card-header {
    width: 100%;
  }

  .box-card-content {
    width: 100%;
  }
</style>
